<template>
	<div class="head zst-box-header" v-if='"01,03,50,53".indexOf(gids)>-1 && $route.path.indexOf("paly")==-1' style="height: 151px;">
		<template v-if='headType==1'>
			<header class="top" ref='header'>
				<router-link class='backIcon' :to='"/backHome/"+title'></router-link>
		        <div class="center"><p>{{title}}</p></div>
		        <a href="http://www.15988.com/" class="home"></a> 	
		    </header>
		</template>
		<template v-else>
			<header class="top">
				<a class="back" href="javascript:history.back(-1);" v-if='isBackIcon != 1'><span></span></a>
		        <div class="center"><p>{{ title }}</p></div>
		        <a href="http://www.15988.com/" class="home"></a>
		       <!--  <router-link class='home' to='/home'></router-link> -->
		    </header>
		</template>
		<exper-temp></exper-temp>
  	</div>
  	<div class="head zst-box-header" v-else>
		<template v-if='headType==1'>
			<header class="top" ref='header'>
				<router-link class='backIcon' :to='"/backHome/"+title'></router-link>
		        <div class="center"><p>{{title}}</p></div>
		        <a href="http://www.15988.com/" class="home"></a> 	
		    </header>
		</template>
		<template v-else>
			<header class="top">
				<a class="back" href="javascript:history.back(-1);" v-if='isBackIcon != 1'><span></span></a>
		        <div class="center"><p>{{ title }}</p></div>
		        <a href="http://www.15988.com/" class="home"></a>
		       <!--  <router-link class='home' to='/home'></router-link> -->
		    </header>
		</template>
  	</div>
</template>

<script>
import experTemp from '@/components/exper'
export default {
  name: "headerTemp",
  props: ["gid",'title','headType','isBackIcon'],
  data() {
    return { 
   		gids:'',
	};
  },
  components:{
    experTemp
  },
  methods:{},
  created() {
  	console.log(this.$route.path.indexOf("paly")==-1)
  	let gid = '';
	if (this.$route.params.gid) {
		gid = this.$route.params.gid
	}else{
		gid = this.$route.path.split('/')[this.$route.path.split('/').length-1]
	}
  	this.gids = gid
  },
  mounted() {

  }
};
</script>

<style lang="less" scoped>
.zst-box-header{
	width: 100%;
	// height: 165px;
	background:#fff;
	border-bottom:1px #ddd solid;
	position:fixed;
	left: 0;
	top: 0;
	z-index:999;
	.banner{
		position:relative;
		width: 100vw;
		height: 120px;
		transition: height .5s;
		overflow: hidden;
		// top: 45px;
		// left: 0;
		// right: 0;
		img{
    		width: 100%;
    		height:100%;
    	}
	}
	.top{
	    width: 100%;
	    height: 45px;
	    line-height:45px;
	    position: fixed;
	    top: 0;
	    box-sizing: border-box;
	    z-index: 9;
		background:#fff;
    	color: #000;
    	text-align: center;
	}
	.top .back{
	    position: absolute;
	    display: block;
		top:0;
		left: 0;
		font-size: 100px;
		width: 45px;
		height: 45px;
		z-index: 999;
		span{
			position:absolute;
			top: 15px;
			left: 17px;
			display: block;
			width: 10px;
			height: 10px;
			border:1px solid;
			border-color: #333 transparent transparent #333;
			transform: rotate(-45deg);
		}
	}
	.top .home{
	    position: absolute;
	    display: block;
		top:0;
		right: 0;
		width: 45px;
		height: 45px;
		z-index: 999;
		background:url(../assets/zst/icon_home.png) center no-repeat;
		background-size:27px auto;
	}
	.top .backIcon{
	    position: absolute;
	    display: block;
		top:0;
		left: 0;
		width: 45px;
		height: 45px;
		z-index: 999;
		background:url(../assets/icon.png) center no-repeat;
		background-size:27px auto;
	}
	.top .center{
	    line-height:45px;
	    position:relative;
	    font-size:18px;
	    padding: 0 45px;
	    p{
	    	display: inline-block;
	    }
	}
}
</style>

